<%@page import="java.util.Date"%>
<%@ page contentType="text/html; charset=UTF-8"%>

<style>
	#hul img{
		border-radius:50%;
		height: 50px;
		width: 50px; 
		vertical-align: middle;
	}
	#hul span{
		font-size: 30px; 
		vertical-align: middle;
	}
	

</style>

<!--右边部分-->
<section id="content_right">
	<div id="chatbox">
		<div id="friendslist">
			<div id="topmenu">
				<span class="friends"></span>
				<span class="chats"></span>
				<span class="history"></span>
			</div>
			
			<div id="friends">
			
				<!-- 加载好友列表的地方 -->
				
				
				<div id="search">
					<input type="text" id="searchfield" value="Search contacts..." />
				</div>
				
			</div>                
			
		</div>	
		
		<div id="chatview" class="p1">    	
			<div id="profile">

				<div id="close">
					<div class="cy"></div>
					<div class="cx"></div>
				</div>
				
				<p>Miro Badev</p>
				<span></span>
			</div>
			<div id="chat-messages">
				<label><%=new Date() %></label>
				
				<!-- 加载消息的地方！ -->
				
				
			</div>
			
			<div id="sendmessage">
				<input type="text" id='mes' value="Send message..." />
				<button id="send">发送</button>
			</div>
		
		</div>        
	</div>	

	<script>
	$(document).ready(function () {
	    var preloadbg = document.createElement('img');
	    preloadbg.src = 'img/timeline1.png';
	    $('#searchfield').focus(function () {
	        if ($(this).val() == 'Search contacts...') {
	            $(this).val('');
	        }
	    });
	    $('#searchfield').focusout(function () {
	        if ($(this).val() == '') {
	            $(this).val('Search contacts...');
	        }
	    });
	    $('#sendmessage input').focus(function () {
	        if ($(this).val() == 'Send message...') {
	            $(this).val('');
	        }
	    });
	    $('#sendmessage input').focusout(function () {
	        if ($(this).val() == '') {
	            $(this).val('Send message...');
	        }
	    });
	    
	 // 添加一条消息
	    function addMag(time='默认',mess='默认消息',direction='1'){
	        // direction 1 是自己发的，0是好友发的
	    	
	    	// 自己发的
	    	if(direction==1){
	    		/*
				 * <div class="message right1"> <img src="img/2_copy.jpg" /> <div
				 * class="bubble"> Can you share a link for the tutorial? <div
				 * class="corner"></div> <span>1 min</span> </div> </div>
				 */
	    		var img = $.cookie('img');
	    		var messages = "<div class='message right1'><img src='"+img+"' /><div class='bubble'>"+mess+"<div class='corner'></div><span>"+time+"</span></div></div>";
	    		
	    		$('#chat-messages').append(messages);
	    		
	    	}else if(direction==0){
	    		var img = $('#portrait').attr('src');
		   		var messages = "<div class='message'><img src='"+img+"' /><div class='bubble'>"+mess+"<div class='corner'></div><span>"+time+"</span></div></div>";
		   		$('#chat-messages').append(messages);
	    	}

	    }
	    
	    $('#friends').on('click','.friend',function () {
	    	
	    	var $messages = $("#chat-messages");
	    	//清空里面的子元素
	    	$messages.empty();
	    	//获取好友id
	    	var id = $(this).attr('data-id');
	    	//获取所有的和好友的消息
	    	var item = localStorage.getItem(id);
	    	
	    	
	    	
	    	if(item!=null){
	    		var items = new Array();
		    	items = item.split('%');
		    	
		    	for(var i = 0;i<items.length;i++){
					var jsonstr = items[i].substring(0,items[i].length-1);
					var len = items[i].substr(items[i].length-1,1);
					var json = JSON.parse(jsonstr);
					addMag(json.time,json.msg,len);
		    	}
	    	}
	    	
	    	
	    	
            var childOffset = $(this).offset();
            var parentOffset = $(this).parent().parent().offset();
            var childTop = childOffset.top - parentOffset.top;
            var clone = $(this).find('img').eq(0).clone();
            var top = childTop + 12 + 'px';
            $(clone).css({ 'top': top }).addClass('floatingImg').appendTo('#chatbox').attr('id','portrait').attr('data-id',$(this).attr('data-id'));
            setTimeout(function () {
                $('#profile p').addClass('animate');
                $('#profile').addClass('animate');
            }, 100);
            setTimeout(function () {
                $('#chat-messages').addClass('animate');
                $('.cx, .cy').addClass('s1');
                setTimeout(function () {
                    $('.cx, .cy').addClass('s2');
                }, 100);
                setTimeout(function () {
                    $('.cx, .cy').addClass('s3');
                }, 200);
            }, 150);
            $('.floatingImg').animate({
                'width': '68px',
                'left': '108px',
                'top': '20px'
            }, 200);
            var name = $(this).find('p strong').html();
            var email = $(this).find('p span').html();
            $('#profile p').html(name);
            $('#profile span').html(email);
            $('.message').not('.right').find('img').attr('src', $(clone).attr('src'));
            $('#friendslist').fadeOut();
            $('#chatview').fadeIn();
            $('#close').unbind('click').click(function () {
            	
            	var num = $("[data-id="+id+"]").find('span[class=num]');
    			num.text(0);
    			num.hide();
            	
                $('#chat-messages, #profile, #profile p').removeClass('animate');
                $('.cx, .cy').removeClass('s1 s2 s3');
                $('.floatingImg').animate({
                    'width': '40px',
                    'top': top,
                    'left': '12px'
                }, 200, function () {
                    $('.floatingImg').remove();
                });
                setTimeout(function () {
                    $('#chatview').fadeOut();
                    $('#friendslist').fadeIn();
                }, 50);
            });
        });
	    
	});
	</script>
	
	

</section>